/* 整个首页独有的样式或者页面级样式,最后引入,特有样式 */
.nav {
    /* height: 高度 */
    height: 30px;
    /* background: 背景色 */
    background: #e3e4e5;
    /* border-bottom: 下边框 */
    border-bottom: 1px solid #add;;
}
.nav-box {
    /* margin 居中设置  */
    margin: 0px auto;
    /* 内容显示宽度 */
    width: 1190px;   
    /* 内部距右多远 */
    /* padding-right: 50px; */
    /* 右对齐 */
    text-align: right;
}
.nav-box ul li {
    /* ul li 横着排的属性 */
    display: inline-block;
    /* 间距 */
    padding: 0px 10px;
    /* 字体大小 */
    font-size: 12px;
    /* 高度和行高设置后, 文件就能居中 */
    /* 高度 */
    height: 30px;
    /* 行高 */
    line-height: 30px;
    /* 绝对定位,然后在li上relative相对就可以=>2 */
    position: relative;
}
.nav-box ul li a {
    /* 颜色 */
    color: #999999;
    /* a标签下划线 */
    text-decoration: none;
}
/* 给导航栏增加间隔 | */
/* li:not(:last-child)  排除最后一个元素后面的 | */
.nav-box ul li:not(:last-child):after {   
    content:"";
    width: 1px;
    height: 14px;  
    background-color: #cccccc;
    /* 绝对定位,然后在li上relative相对就可以=>1 */
    position: absolute;
    /* 下面是定位的位置 */
    top: 8px;
    right: 0px;
    display: block;
}
/* 鼠标移动上去显示一个京东红 */
.nav-box ul li a:hover {
    color: #f10215;
}
.header-box {
    /* div高度 */
    height: 140px;
    /* 背景色 */
    background: #ffffff;
}
.header {
    /* 宽度 */
    width: 1190px;
    /* 弹性布局 */
    display: flex;
    margin: 0px auto;
    /* 上下间距 */
    padding: 10px 0px;    
}
.header .logo-box {
    width: 190px;
    height: 120px;
}
.header .search-box {
    width: 790px;
    padding: 0px 10px;  
}
.header .search-bar {
    padding: 15px 0px 0px 50px;
    /* 弹性布局 */
    display: flex;
}
.search-bar input {
    border: 1px solid #e1231b;
    width: 500px;
    height: 30px;
    /* 边距 */
    padding: 2px 10px;
    /* 去除浏览器默认input输入框的样式 */
    outline: none;
}
.search-bar .search-btn {
    width: 50px;
    height: 34px;
    border: 1px solid #e1251b;
    background: #e1251b;
    /* 鼠标移动上去有一个小手 */
    cursor: pointer;
    /* 让他里面的元素居中开始 */
    line-height: 34px;
    text-align: center;
    /* 居中结束 */
}
.search-bar .cart-btn {
    /* 左边距20 ，为了购物车和搜索分开 */
    margin: 0px 0px 0px 20px;
    border: 1px solid #e1251b;
    width: 100px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    color: #e1251b;
    font-size: 12px;
    cursor: pointer;
}
.search-bar .iconfont-cart {
    font-size: 18px;
    font-weight: bold;
}
.search-bar .iconfont-search {
    /* 字体图标颜色设置 */
    color: #ffffff;
    /* 图标大小通过更改字体大小实现 */
    font-size: 22px;
    /* 加粗 */
    font-weight: bold;
}


.header .recommend {
    font-size: 12px;
    /* 控制间距 */
    padding: 5px 0px 20px 50px;
}
.header .recommend a {
    color: #999999;
     /* a标签下划线 */
     text-decoration: none;
}
.search-box ul li {
    /* li横着排列 */
    display: inline-block;
    padding: 0px 10px;
} 
.search-box ul li a {
    color: #333333;
    text-decoration: none;
}



































